<template>
	<a-modal
		:visible="visible"
		width="90vw"
		wrap-class-name="a-modal-tab-dialog"
		centered
		destroyOnClose
		@cancel="cancel"
		:footer="null"
		:maskClosable="false">
		<template #title>
			<div class="a-modal-tab-title" style="height: 56px">
				<a-card
					class="dialog-card-container"
					:tab-list="detailTabs.map((item: any, index: number) => ({ key: index, tab: item }))"
					:active-tab-key="activeKey"
					@tabChange="(key: any) => (activeKey = key)" />
			</div>
		</template>
		<div class="modal-comtainer" v-show="activeKey === 0">
			<a-typography-paragraph strong>
				<blockquote>1.导出需要录入合同的房间</blockquote>
			</a-typography-paragraph>
			<p>请选择需要录入合同的房源范围，仅导出空置房间。</p>
			<a-form-item label="门店：" :name="['renterInfo', 'identityCard']">
				<!-- <dept-emp-select multiple onlyStore onlyDept  placeholder="请选择门店" v-model:dept-id="params.deptId" v-model:emp-id="params.empId" @change="search()" /> -->
				<a-select
					class="filter-selector"
					placeholder="请选择门店"
					v-model:value="params.deptId"
					max-tag-count="responsive"
					layout="'inline'"
					:options="deptOptions"></a-select>
			</a-form-item>
			<a-button type="primary" :loading="loading.export" @click="handleExport">
				<small>{{ loading.export ? '导出中' : '导出数据' }}</small>
			</a-button>
			<a-typography-paragraph strong>
				<blockquote>2.根据表格填写规则完善表格后，上传表格</blockquote>
			</a-typography-paragraph>
			<p class="red">*批量导入合同，签约类型均为纸质合同。</p>
			<p class="red">
				*导入合同后门锁是否授权与水电表是否清零与设置-》安全设置中的配置相关，请确认设置中相关配置是否正确后再导入数据
			</p>
			<p class="red">*每次最多导入500条数据</p>
			<a-upload
				v-model:file-list="fileList"
				name="file"
				:showUploadList="false"
				maxCount="1"
				:action="baseURL + 'admin/renter_contract/importBatchContractList'"
				:headers="authHeader()"
				@change="handleUpload">
				<a-button :loading="loading.import" type="primary">
					<small>{{ loading.import ? '导入中' : '导入文件' }}</small>
				</a-button>
			</a-upload>
		</div>
		<div class="modal-comtainer" v-show="activeKey === 1">
			<importHistory :visible="activeKey === 1"></importHistory>
		</div>
	</a-modal>
	<importPreview
		v-if="ImportPreviewConfig.visible"
		v-model:visible="ImportPreviewConfig.visible"
		@success="cancel"
		:data="ImportPreviewConfig.data"></importPreview>
</template>
<script setup lang="ts">
	import {onMounted, reactive, ref, watch, createVNode} from 'vue'
	import {authHeader, baseURL} from 'yuxin-base/src/utils/axios'
	import DeptEmpSelect from '@/components/common/dept-emp-select.vue'
	import importHistory from './importHistory.vue'
	import {Form, message} from 'ant-design-vue'
	import importPreview from './import-preview-dialog.vue'
	import dayjs from 'dayjs'
	import {importBatchContractList, getImportContractList, getHistoryImportContract, exportContractHouseTemplate} from '@/api/contract'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {useStore} from '@/store/index'
	import XEUtils from 'xe-utils'

	import {microApps} from '@/micros/apps'
	const store = useStore()
	onMounted(async () => {
		await store.getDeptOptions()
	})
	const emit = defineEmits(['update:visible', 'success'])
	const params = ref({
		deptId: null,
		empId: null
	})
	const props = withDefaults(
		defineProps<{
			visible: boolean
			data?: any
		}>(),
		{
			visible: false,
			data: {}
		}
	)
	const activeKey = ref(0)
	const loading = ref({
		import: false,
		export: false
	})
	const fileList = ref([])
	const ImportPreviewConfig = ref({
		visible: false,
		data: []
	})
	const detailTabs = reactive(['批量导入合同', '导入合同历史'])

	const cancel = () => {
		emit('update:visible', false)
	}
	const search = () => {}

	watch(
		() => props.visible,
		val => {
			if (val) {
				getIMportList()
			}
		}
	)
	const handleExport = async () => {
		// if (!params.value.deptId) {
		// 	message.error('请选择门店')
		// 	return
		// }
		loading.value.export = true
		exportContractHouseTemplate({deptIds: [params.value.deptId].filter(e => e)}).then((res: any) => {
			loading.value.export = false

			const blob = new Blob([res], {
				type: 'application/vnd.ms-excel;charset=utf-8'
			})
			const link = document.createElement('a')
			link.href = window.URL.createObjectURL(blob)
			link.download = '明智云合同导入表格.xlsx'
			link.click()
		})
	}
	const handleUpload = async val => {
		// upload data
		console.log(val.file.status, 1111)
		loading.value.import = true
		if (val.file.status === 'uploading'){
			// message.success('数据导入中，请稍后')
			getIMportList()
			return
		}
		if (val.file.status === 'done' || val.file.response) {
			loading.value.import = false
			getIMportList()
			return
		}
		getIMportList()

		// setTimeout(() => {
		// 	getIMportList()
		// }, 1500)
		// showImportPreview()
	}
	const deptOptions: any = ref([])
	onMounted(() => {
		handleGetDept()
	})
	const handleGetDept = async () => {
		const {data: deps} = await settingApi.getDeptTreeList()
		const filter = XEUtils.filterTree([deps], item => item.isStore, {children: 'childList'})
		deptOptions.value = XEUtils.toTreeArray(filter, {children: 'childList'}).map(e => ({label: e.name, value: e.id}))
		deptOptions.value.unshift({label: '不限', value: null})
		console.log(deptOptions.value)
	}

	const getIMportList = async () => {
		loading.value.import = true
		const res = await getImportContractList({})
		loading.value.import = false
		if ((res.data || []).length) {
			ImportPreviewConfig.value.visible = true
			ImportPreviewConfig.value.data = res.data.map(e=>({...e,errorList:[]})) || []
		}
	}
</script>
<style lang="less">
	.modal-comtainer {
		padding: 30px 20px;
	}

	.red {
		color: red;
	}
</style>
